<template>
  <view class="search">
    <view class="search-input" @click.stop="!showSearch?handleShowSearch():''">
      <u-input
          v-model="keyword"
          :placeholder="placeholder"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          :disabled="!showSearch&&isMultiple"
          disabledColor="#FFFFFF"
          clearable
          @confirm="handleSearch"
      >
        <template slot="suffix">
          <button :class="showSearch? 'cancel-btn' :'search-btn'" size="mini" @click.stop="handleShowSearch"
                  v-if="isMultiple">
            {{ showSearch ? '取消' : '搜索' }}
          </button>
          <button class="search-btn" size="mini" @click.stop="handleSearch" v-else>搜索</button>
        </template>
      </u-input>
      <view class="search-input-type" v-if="showSearch && isMultiple">
        <uni-data-checkbox mode="tag" v-model="searchType" :localdata="searchTypeList"
                           @change="handleSearchTypeChange"></uni-data-checkbox>
      </view>
    </view>
    <slot name="search-tabs">
    </slot>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared'
  },
  name: "hxk-search",
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    //是否多个搜索类型
    isMultiple: {
      type: Boolean,
      default: false
    },
    //搜索类型列表
    searchTypeList: {
      type: Array,
      default: () => []
    },
    //搜索类型
    currentSearchType: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      showSearch: false,
    }
  },
  computed: {
    keyword: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    searchType: {
      get() {
        return this.currentSearchType;
      },
      set(val) {
        console.log("set:searchType", val)
        this.$emit("update:currentSearchType", val);
      }
    }
  },
  methods: {
    //搜索
    handleSearch() {
      this.$emit("search", this.keyword);
    },
    //显示搜索
    handleShowSearch() {
      this.keyword = ''
      this.showSearch = !this.showSearch;
      if (!this.showSearch) {
        this.handleSearch()
      }
    },
    //点击搜索类型
    clickSearchTab(index) {
      this.currentTab = index;
      this.handleSearch();
    },
    //搜索类型切换
    handleSearchTypeChange(e) {
      this.searchType = e.detail.value
      this.keyword = ''
      this.handleSearch();
    }
  }
}
</script>

<style scoped lang="scss">
.search {

  .search-input {
    padding: 0 20rpx;

    .search-btn {
      background: $hxk-primary-color;
      color: #fff;
    }

    .cancel-btn {
      color: $hxk-primary-color;
      background: #fff;
      border: none;

      &:after {
        border: none;
      }
    }

    .search-input-type {
      margin-top: 10rpx;

      ::v-deep .checklist-group {
        display: flex;
      }

      ::v-deep .is--tag {

        &.is-checked {
          background: $hxk-primary-color !important;
          border-color: $hxk-primary-color !important;
        }
      }
    }
  }

  .search-tabs {
    ::v-deep .u-tabs__wrapper__nav__item__text {
      font-size: 28rpx !important;
      white-space: nowrap;
    }

    ::v-deep .u-tabs__wrapper__nav__line {
      bottom: 18rpx !important;
      opacity: 0.6 !important;
    }
  }
}
</style>